.nav-wrapper{
  width: 100%;
  height: 48px;
  line-height: 48px;
  background-color: #000;
  color: #fff;
  font-size: 14px;
  nav{
    max-width: 1100px;
    height: 48px;
    margin: 0 20px;
    background-color: #000;
    display: flex;
    justify-content: space-between;
    .list{
      .listIcon{
        width: 16px;
        height: 100%;
        padding: 14px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        li{
          height: 1px;
          background-color: #fff;
          transform-origin: 0 0;
        }
        &:hover li:nth-child(1){
          transform: rotateZ(37deg);
          transition: all 0.3s;
        }
        &:hover li:nth-child(2){
          display: none;
        }
        &:hover li:nth-child(3){
          transform: rotateZ(-37deg);
          transition: all 0.3s;
        }
        &:hover + .listContent{
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          margin-top: 48px;
          padding: 0 50px;
          background-color: #000;
          li{
            padding: 5px;
            border-bottom: 1px solid #686868;
          }
        }
      }
      .listContent{
        display: none;
      }
    }
    .title{
      color: red;
    }
  }
}

@media only screen{
  @media (min-width: 768px){
    .nav-wrapper{
      nav{
        .list{
          order: 2;
          flex: 1;
          .listIcon{
            display: none;
          }
          .listContent{
            display: flex;
            justify-content: space-around;
            .searchTxt{
              display: none;
            }
          }
        }
        .title{
          order: 1
        }
        .icon-user{
          order: 3;
        }
      }
    }
  }
}

